{% extends "index.html" %}
{% load staticfiles %}
{% block right %}
    <style>
        #logo {
            height: 60px;
            width: 60px;
            display: inline-block;
        }

        #l_content {
            margin-top: 110px;
            width: 96%;
            margin-left: 2%;
            margin-bottom: 3%;
            position: relative;
        {#height: calc(100% - 160px)#}
        }

        .l_neirong {
            background-color: white;
        {#padding-top: 100px;#} position: relative;
            padding-bottom: 3%;
            overflow: auto;
        {#height: 530px;#}
        }

        .fenlei {
            display: inline-block;
            margin-top: 2%;
            margin-left: 2%;
            text-align: center
        }

        .zan {
            background-color: green;
            color: white;
            border-radius: 2px;
            padding: 2px;
            cursor: pointer
        }

        .pl {
            border: 1px grey solid;
            border-radius: 2px;
            cursor: pointer;
            padding: 2px;
        }

        .label {
            cursor: pointer
        }

        .bt {
            font-size: 2rem
        }

        .auther {
            font-size: 0.8rem;
            color: #39b3d7;
        }

        .f_one {
            margin: 20px;
            width: 70%
        }

        .wei {
            margin-top: 8px
        }

        .margin_left {
            margin-left: 15px;
        }

        #search {
            position: fixed;

            top: 40%;
            right: 3%;
            z-index: 11;
        {#border: 1px red solid;#} width: 20%;
        }

        .nice-pinglun {
            margin-top: 8px;
            margin-left: 5%
        }

        .black {
            color: black
        }
        .allready{background-color: grey;}
    .theme{text-indent: 2em;}
    .pl-time{color: grey}
    </style>
    <script src="{% static 'js/jquery.js' %}"></script>




    <header style="position: fixed;top:100px;height: 70px;width:100%;z-index: 15;background-color: ghostwhite">
        <div style="position: absolute;top: 0;left: 0;z-index: 11">此功能正在完善，敬请期待！</div>
        <img id="logo" src="{% static 'images/lysf.jpg' %}" alt="">
        <p id="title" style="font-size: 2rem;line-height: 60px;margin-right: 10%">DB智能管理系统论坛</p>
    </header>
    <section id="l_content">
        <ul class="nav nav-tabs nav-justified"
            style="position: fixed;top:170px;height: 40px;width:76.8%;z-index: 10;background-color: ghostwhite">
            {% block title %}
            <li id="1" class="active l_li"><a href="/forum/index/">广场</a></li>
            <li id="2" class="l_li"><a href="/forum/dongtai/">发表动态</a></li>
            <li id="3" class="l_li"><a href="/forum/me/">与我相关</a></li>
            <li id="4" class="l_li"><a href="/forum/liuyan/">留言</a></li>
            <li id="5" class="l_li"><a href="/forum/zone/">个人中心</a></li>
                {% endblock %}
        </ul>

        <div class="l_neirong" id="l1">
            {% block l_content %}
                <style>

                </style>
                <div id="search">
                    <form class="form-horizontal" role="form" action="/forum/index/?tag=0" method="get">
                        <div style="position: absolute;right: 15px;z-index: 1">
                            <button type="submit" class="btn btn-primary">搜索</button>
                        </div>
                        <div class="col-sm-12">
                            {% if text %}
                            <input type="text" name="text" class="form-control" id="firstname" placeholder="输入搜索内容" value="{{ text }}">
                            {% else %}
                            <input type="text" name="text" class="form-control" id="firstname" placeholder="输入搜索内容">
                            {% endif %}
                        </div>
                    </form>
                    <div class="col-sm-12">
                        <p style="font-size: 2rem;margin-top: 5%;color: dodgerblue">分类列表</p>
                        <a href="/forum/index/?tag=-1&text={{ text }}">
                        <p class="fenlei"><span class="label label-info">点赞最多</span></p></a>
                        <a href="/forum/index/?tag=0&text={{ text }}">
                        <p class="fenlei"><span class="label label-info">全部</span></p></a>
                        {% for o in tags %}
                            {% if o.id == tag %}
                                <a href="/forum/index/?tag={{ o.id }}&text={{ text }}">
                                <p class="fenlei"><span class="label label-success">{{ o.type }}</span></p></a>
                            {% else %}
                                <a href="/forum/index/?tag={{ o.id }}&text={{ text }}">
                                <p class="fenlei"><span class="label label-default">{{ o.type }}</span></p></a>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% for o in content %}
                <div class="f_one">
                    <div>
                        <a href="/forum/article_deatil/?id={{ o.id }}&type=0" class="black"><p class="bt">{{ o.title }}</p></a>
                        <p class="auther">
                            <span>{{ o.auther }}({{ o.depart }})</span><span
                                class="margin_left">{{ o.time }}</span><span class="margin_left">{{ o.tag }}</span>
                        </p>
                        <a href="/forum/article_deatil/?id={{ o.id }}&type=0" class="black"><p class="theme">

                       {{ o.content|safe }}


                        </p></a>
                        <p class="wei">
                            {% if o.is_coll %}
                            <span class="pl allready" disabled="true" style="background-color: orange">已收藏</span>
                            {% else %}
                            <span class="pl coll" style="background-color: orange" name="{{ o.id }}">收藏{{ o.coll }}</span>
                            {% endif %}
                            <a href="/forum/article_deatil/?id={{ o.id }}&type=0">
                            <span class="margin_left pl">讨论{{ o.pl_num }}</span></a>
                            {% if o.is_praise %}
                                <span class="margin_left zan allready" disabled="true">已赞{{ o.praise }}</span>
                            {% else %}
                            <span class="margin_left zan remark">点赞{{ o.praise }}</span>
                            {% endif %}
                            <span class="margin_left pl remark">转发</span>
                        </p>
                    </div>
                    {% if o.dp %}
                    <div class="nice-pinglun">
                        <p>
                            <span style="color: orangered">经典评论</span><span style="color: blue"
                                                                            class="pl">{{ o.dp.user }}({{ o.dp.depart }})</span>:
                            <span style="color: grey;opacity: 0.5">下面是点赞最多的评论哦</span>
                            <br>
                            <span>{{ o.dp.content }}</span><span class="zan margin_left remark">赞{{ o.dp.praise }}</span>
                        </p>
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
                <script>
                    $('.l_li').removeClass('active');
                    $('#1').addClass('active');
                </script>
            {% endblock %}
        </div>

    </section>
    <script>
        $('.left_c').removeClass('active');
        $('#forum').addClass('active');
        $('.l_li').each(function () {
            $(this).click(function () {
                $('.l_li').removeClass('active');
                $(this).addClass('active');
            })
        });
        $('.remark').each(function () {
            $(this).click(function () {
                alert('暂未开放该功能')
            })
        });
         $('.coll').each(function () {
            $(this).click(function () {

                var aid = $(this).attr('name');
                settings = {
                    url: "/forum/coll/",
                    type: "GET",
                    data:{"aid":aid},
                    success: function (data) {
                        if (data.data.status == 0){
                            alert('你已收藏过该文章')
                        }else{
                            alert('收藏成功');
                            window.location.reload()
                        }

                    }
                };
                $.ajax(settings);
            })
        })
    </script>

{% endblock %}